<template>
    <div class="slba-container">
        <div class="slba-header">
            <CommonHeader :leftIcon="true" title="备案统计" :onLeft="back" />
            <van-tabs class="custom-tabs2" v-model:active="active" @click-tab="tabSwitch">
                <van-tab v-for="tab in tabs" :title="tab.title" :border="false" :key="tab.name" :name="tab.name">
                    <template #title>{{ tab.title }}
                    </template>
                </van-tab>
            </van-tabs>
        </div>
        <div class="slba-content">

            <BeiAnDanView v-if="active == 'tab1'" />
            <BeiAnZheView v-if="active == 'tab2'" />
            <ZuoWuView v-if="active == 'tab3'" />
            <PingZhongView v-if="active == 'tab4'" />
            <QiYeView v-if="active == 'tab5'" />
        </div>
    </div>
</template>

<script setup>
import "@/assets/css/tabs.css"
import { ref, onMounted, watch, } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import BeiAnDanView from "@/components/beiantongji/BeiAnDanView.vue";
import BeiAnZheView from "@/components/beiantongji/BeiAnZheView.vue";
import ZuoWuView from "@/components/beiantongji/ZuoWuView.vue";
import PingZhongView from "@/components/beiantongji/PingZhongView.vue";
import QiYeView from "@/components/beiantongji/QiYeView.vue";

const router = useRouter();
const route = useRoute();

const back = () => {
    router.back();
}

const tabs = ref([
    { name: 'tab1', title: '区域(备案单)' },
    { name: 'tab2', title: '区域(备案者)' },
    { name: 'tab3', title: '作物', },
    { name: 'tab4', title: '品种', },
    { name: 'tab5', title: '企业', },
]);
const active = ref(route.query.tab || 'tab1');

const tabSwitch = (item) => {
    active.value = item.name
    router.replace({ query: { ...route.query, tab: item.name } });
}
// 当路由发生变化时（例如用户返回该页面时），更新选中的标签索引
watch(route, () => {
    active.value = route.query.tab || 'tab1';
});
</script>

<style lang="less" scoped>
.slba-container {
    background: url('@/assets/img/main/all_bg.png') no-repeat;
    background-size: cover;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.slba-header,
.slba-footer {
    flex: 0 0 auto;
    text-align: center;
    padding: 0;
}

.slba-content {
    flex: 1 1 auto;
    overflow: hidden;
    background-color: #F3F9F8;
}


.slba-tabbar {
    background-color: transparent;
    color: #fff;
}

.slba-left-text {
    font-weight: 400;
    font-size: 18px;
    color: #fff;
}

.slba-title-text {
    font-weight: 400;
    font-size: 18px;
    color: #fff;
}

.slba-right-text {
    font-weight: 400;
    font-size: 18px;
    color: #fff;
}
</style>